<!--
 * @Description: 
 * @Version: V1.0.0
 * @Author: 周艳凯 484894717@qq.com
 * @Date: 2024-09-27 16:48:55
 * @LastEditors: 周艳凯 484894717@qq.com
 * @LastEditTime: 2024-10-10 11:32:13
 * @FilePath: index.vue
 * Copyright 2024 Marvin, All Rights Reserved. 
 * 2024-09-27 16:48:55
-->
<template>
  <div :class="classNames">
    <view class="arco-ellipsis-content" :style="style">
      <slot></slot>
    </view>
    <view class="arco-ellipsis-more">
      <view class="arco-ellipsis-expand" @click="showMore">
        <slot :expanded="isMore" name="expand-node">
          {{ isMore ? "mode" : showPutitaway ? "收起" : "" }}
        </slot>
      </view>
    </view>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, ref } from "vue";
const icon = defineComponent({
  name: "More",
  options: {
    // 虚拟化节点
    virtualHost: true,
  },
  props: {
    height: {
      type: Number,
      default: 66,
    },
    showPutitaway: {
      type: Boolean,
      default: true,
    },
  },
  setup(props) {
    const prefixCls = "arco-ellipsis";
    const heights = ref(props.height);
    const isMore = ref(true);
    const classNames = computed(() => {
      return [prefixCls];
    });
    const style = computed(() => {
      const result: any = {};
      if (isMore.value) {
        console.log(heights.value, "我先进来的？？");
        result.height = heights.value + "px";
      }
      return result;
    });

    // 显示更多
    function showMore() {
      if (!isMore.value) {
        heights.value = props.height;
      }
      isMore.value = !isMore.value;
    }

    return {
      classNames,
      showMore,
      style,
      isMore,
    };
  },
});
export default icon;
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>
